<template>
  <el-dialog title="从购买记录录入付款明细" v-drag2anywhere :visible.sync="dialogVisible" width="1400px"
    :close-on-click-modal="false" append-to-body :modal-append-to-body="false" v-drag2anywhere @close="dialogVisible=false">
    <el-form :model="filterData" ref="filterForm" label-width="0">
      <el-row :gutter="20">
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.reqcode" placeholder="付款申请编号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.title" placeholder="商品名称关键字" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.model" placeholder="规格型号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.requester" placeholder="付款申请人" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.client" placeholder="客户名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.supname" placeholder="供应商名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 100px;">
          <el-form-item label="">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div style="height: 400px; overflow-y: auto;border: 1px solid #E3E3E3; border-top: none;">
            <el-table :data="tableData" ref="tableData" border style="width: 100%;"
              @selection-change="handleSelectionChange">
              <el-table-column label="选择" type="selection" width="50px" align="center"></el-table-column>
              <el-table-column label="付款单号" prop="reqcode" width="130px" align="center"></el-table-column>
              <el-table-column label="采购途径" prop="buyroute" show-overflow-tooltip></el-table-column>
              <el-table-column label="供应商" prop="seller" show-overflow-tooltip></el-table-column>
              <el-table-column label="商品名称" prop="title" width="150px" show-overflow-tooltip></el-table-column>
              <el-table-column label="品牌" prop="brand" width="80px" show-overflow-tooltip></el-table-column>
              <el-table-column label="规格型号" prop="model" show-overflow-tooltip></el-table-column>
              <el-table-column label="单位" prop="unit" width="80px" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column label="数量" prop="count" width="80px" v-if="false" align="center"></el-table-column>
              <el-table-column label="单价" prop="price" align="center" width="120px"></el-table-column>
              <el-table-column label="发票类型" prop="type" width="100px" align="center">
                <template v-slot="scope">
                  {{scope.row.type==1? "纸质普票":(scope.row.type==2? "电子普票":(scope.row.type==3? "纸质专票":"电子专票"))}}
                  {{scope.row.ticketrate}}
                </template>
              </el-table-column>
              <el-table-column label="运费" prop="yunfei" width="95px"  align="center"></el-table-column>
              <el-table-column label="金额" prop="total" align="center" v-if="false" width="110px"></el-table-column>
              <el-table-column label="合计" prop="sum" align="center" v-if="false"  width="110px"></el-table-column>
              <el-table-column label="客户" prop="client" align="center" width="100px" show-overflow-tooltip></el-table-column>
              <el-table-column label="申请人" prop="requester" align="center" width="80px" show-overflow-tooltip></el-table-column>
              <el-table-column label="申请日期" prop="createtime" width="150px"></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right;">
      <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
        :current-page="curpage" prev-text="上一页" next-text="下一页" :page-sizes="[10, 20, 30]"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave" :disabled="selection.length<=0">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        filterData: {
          reqcode: '',
          title: '',
          num: '',
          client:'',
          requester:'',
          model: '',
          supname: '',
        },
        numrows: 1,
        curpage: 1,
        pagesize: 10,
        selection: [],
        tableData: [],
        dialogVisible: false
      }
    },
    methods: {
      initData() {
        this.filterData = {
            reqcode: '',
            title: '',
            num: '',
            requester:'',
            client:'',
            model: '',
            supname: ''
          },
          this.loadDataList();
      },
      handleSelectionChange(selection) {
        this.selection = selection;
      },
      loadDataList() {
        const params = {
          requester: this.filterData.requester,
          reqcode: this.filterData.reqcode,
          title: this.filterData.title,
          model: this.filterData.model,
          client:this.filterData.client,
          requester:this.filterData.requester,
          seller: this.filterData.supname,
          curpage: this.curpage,
          pagesize: this.pagesize
        }
        this.axios.post("api/admin/buydetail/popuplist", params).then(res => {
          if (res.status == 200 && res.data.code) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
          }
        })
      },
      handleSearch() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleSave() {
        this.$emit("completeHandler", this.selection);
        this.dialogVisible = false;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
    }
  }
</script>

<style>
</style>
